
<!doctype html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
      
      
      
        <link rel="prev" href="..">
      
      
        <link rel="next" href="../event-pubsub/">
      
      
      <link rel="icon" href="../assets/favicon.ico">
      <meta name="generator" content="mkdocs-1.6.0, mkdocs-material-9.5.31">
    
    
      
        <title>Overview - AppRun Docs</title>
      
    
    
      <link rel="stylesheet" href="../assets/stylesheets/main.3cba04c6.min.css">
      
      


    
    
      
    
    
      
        
        
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
        <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
      
    
    
      <link rel="stylesheet" href="../assets/vendor/codemirror/codemirror.css">
    
    <script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
    
      
  


  
  

<script id="__analytics">function __md_analytics(){function n(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],n("js",new Date),n("config","UA-123786786-1"),document.addEventListener("DOMContentLoaded",function(){document.forms.search&&document.forms.search.query.addEventListener("blur",function(){this.value&&n("event","search",{search_term:this.value})}),document$.subscribe(function(){var a=document.forms.feedback;if(void 0!==a)for(var e of a.querySelectorAll("[type=submit]"))e.addEventListener("click",function(e){e.preventDefault();var t=document.location.pathname,e=this.getAttribute("data-md-value");n("event","feedback",{page:t,data:e}),a.firstElementChild.disabled=!0;e=a.querySelector(".md-feedback__note [data-md-value='"+e+"']");e&&(e.hidden=!1)}),a.hidden=!1}),location$.subscribe(function(e){n("config","UA-123786786-1",{page_path:e.pathname})})});var e=document.createElement("script");e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=UA-123786786-1",document.getElementById("__analytics").insertAdjacentElement("afterEnd",e)}</script>
  
    <script>"undefined"!=typeof __md_analytics&&__md_analytics()</script>
  

    
    
    
  </head>
  
  
    <body dir="ltr">
  
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#apprun-architecture" class="md-skip">
          Skip to content
        </a>
      
    </div>
    <div data-md-component="announce">
      
    </div>
    
    
      

  

<header class="md-header md-header--shadow" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="Header">
    <a href=".." title="AppRun Docs" class="md-header__button md-logo" aria-label="AppRun Docs" data-md-component="logo">
      
  <img src="../assets/logo.png" alt="logo">

    </a>
    <label class="md-header__button md-icon" for="__drawer">
      
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
    </label>
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            AppRun Docs
          </span>
        </div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              Overview
            
          </span>
        </div>
      </div>
    </div>
    
    
      <script>var media,input,key,value,palette=__md_get("__palette");if(palette&&palette.color){"(prefers-color-scheme)"===palette.color.media&&(media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']"),palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent"));for([key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
    
    
    
      <label class="md-header__button md-icon" for="__search">
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
      </label>
      <div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="__search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
      <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
      <label class="md-search__icon md-icon" for="__search">
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
      </label>
      <nav class="md-search__options" aria-label="Search">
        
        <button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
          
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
        </button>
      </nav>
      
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
        <div class="md-search-result" data-md-component="search-result">
          <div class="md-search-result__meta">
            Initializing search
          </div>
          <ol class="md-search-result__list" role="presentation"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
    
    
      <div class="md-header__source">
        <a href="https://github.com/apprunjs/apprun-docs" title="Go to repository" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
  </div>
  <div class="md-source__repository">
    GitHub
  </div>
</a>
      </div>
    
  </nav>
  
</header>
    
    <div class="md-container" data-md-component="container">
      
      
        
          
        
      
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              
              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    



<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href=".." title="AppRun Docs" class="md-nav__button md-logo" aria-label="AppRun Docs" data-md-component="logo">
      
  <img src="../assets/logo.png" alt="logo">

    </a>
    AppRun Docs
  </label>
  
    <div class="md-nav__source">
      <a href="https://github.com/apprunjs/apprun-docs" title="Go to repository" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
  </div>
  <div class="md-source__repository">
    GitHub
  </div>
</a>
    </div>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href=".." class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Home
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
    
  
  
  
    
    
    
      
        
        
      
    
    
    <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" checked>
        
          
          <label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="">
            
  
  <span class="md-ellipsis">
    Concepts
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="true">
          <label class="md-nav__title" for="__nav_2">
            <span class="md-nav__icon md-icon"></span>
            Concepts
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
    
  
  
  
    
    
    
      
    
    
    <li class="md-nav__item md-nav__item--active md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_1" checked>
        
          
          <label class="md-nav__link" for="__nav_2_1" id="__nav_2_1_label" tabindex="0">
            
  
  <span class="md-ellipsis">
    Architecture
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_1_label" aria-expanded="true">
          <label class="md-nav__title" for="__nav_2_1">
            <span class="md-nav__icon md-icon"></span>
            Architecture
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
    
  
  
  
    <li class="md-nav__item md-nav__item--active">
      
      <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
      
      
        
      
      
        <label class="md-nav__link md-nav__link--active" for="__toc">
          
  
  <span class="md-ellipsis">
    Overview
  </span>
  

          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="./" class="md-nav__link md-nav__link--active">
        
  
  <span class="md-ellipsis">
    Overview
  </span>
  

      </a>
      
        

<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
  
    
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#architecture-overview" class="md-nav__link">
    <span class="md-ellipsis">
      Architecture Overview
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Architecture Overview">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#state" class="md-nav__link">
    <span class="md-ellipsis">
      State
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#view" class="md-nav__link">
    <span class="md-ellipsis">
      View
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#update" class="md-nav__link">
    <span class="md-ellipsis">
      Update
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#avoid-spaghetti-code" class="md-nav__link">
    <span class="md-ellipsis">
      Avoid Spaghetti Code
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Avoid Spaghetti Code">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#apprun-code" class="md-nav__link">
    <span class="md-ellipsis">
      AppRun Code
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#apprun-benefits" class="md-nav__link">
    <span class="md-ellipsis">
      AppRun Benefits
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#ceremony-vs-essence" class="md-nav__link">
    <span class="md-ellipsis">
      Ceremony vs. Essence
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Ceremony vs. Essence">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#the-essence" class="md-nav__link">
    <span class="md-ellipsis">
      The Essence
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#the-ceremony" class="md-nav__link">
    <span class="md-ellipsis">
      The Ceremony
    </span>
  </a>
  
    <nav class="md-nav" aria-label="The Ceremony">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#apprun" class="md-nav__link">
    <span class="md-ellipsis">
      AppRun
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#svelte" class="md-nav__link">
    <span class="md-ellipsis">
      Svelte
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#react-hooks" class="md-nav__link">
    <span class="md-ellipsis">
      React Hooks
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#vue-composition-api" class="md-nav__link">
    <span class="md-ellipsis">
      Vue Composition API
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#expression-comparison" class="md-nav__link">
    <span class="md-ellipsis">
      Expression Comparison
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
      
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../event-pubsub/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Event Pubsub
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../state-management/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    State Management
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../component/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Component
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../reactivity/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Reactivity
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

              
            
              
                
  
  
  
  
    
    
    
      
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_2" >
        
          
          <label class="md-nav__link" for="__nav_2_2" id="__nav_2_2_label" tabindex="0">
            
  
  <span class="md-ellipsis">
    Examples
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_2_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_2_2">
            <span class="md-nav__icon md-icon"></span>
            Examples
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../architecture-ideas/dapr/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Microservice wirh Dapr
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../architecture-ideas/firebase-app/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Serverless App Using Firebase
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../architecture-ideas/db-websocket/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Database and Websocket
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../architecture-ideas/rust-app/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Webassembly app with Rust
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../architecture-ideas/state-machine/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    State Machine
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../showcase/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Showcase
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
    
      
        
        
      
    
    
    <li class="md-nav__item md-nav__item--section md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
        
          
          <label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="">
            
  
  <span class="md-ellipsis">
    Getting started
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_3">
            <span class="md-nav__icon md-icon"></span>
            Getting started
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../installation/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Installation
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../tutorial/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Tutorial
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../create-apprun-app/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Create AppRun App
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../spa/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Single Page App
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
    
      
        
        
      
    
    
    <li class="md-nav__item md-nav__item--section md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" >
        
          
          <label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="">
            
  
  <span class="md-ellipsis">
    Advanced
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_4">
            <span class="md-nav__icon md-icon"></span>
            Advanced
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../view-patterns/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    JSX
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../directive/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Directive
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../svg/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    SVG
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../react/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Use with React
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../3rd-party-libs/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    3rd Party Intergration
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../cli-in-console/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Dev Tools
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../strong-typing/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Strong Typing
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../unit-testing/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Unit Testing
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../notebooks/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Notebooks
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
    
      
        
        
      
    
    
    <li class="md-nav__item md-nav__item--section md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
        
          
          <label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="">
            
  
  <span class="md-ellipsis">
    AppRun Site
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_5">
            <span class="md-nav__icon md-icon"></span>
            AppRun Site
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../apprun-site/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Create
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../apprun-site-build/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Build
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../apprun-site-csr/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Client-Side Rendering
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../apprun-site-ssr/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Server-Side Rendering
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../apprun-site-static/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Static Web Site
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../apprun-site-cli/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    AppRun-Site CLI
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../resources/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Resources
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../about/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    About
  </span>
  

      </a>
    </li>
  

    
  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              
              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
  
    
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#architecture-overview" class="md-nav__link">
    <span class="md-ellipsis">
      Architecture Overview
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Architecture Overview">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#state" class="md-nav__link">
    <span class="md-ellipsis">
      State
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#view" class="md-nav__link">
    <span class="md-ellipsis">
      View
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#update" class="md-nav__link">
    <span class="md-ellipsis">
      Update
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#avoid-spaghetti-code" class="md-nav__link">
    <span class="md-ellipsis">
      Avoid Spaghetti Code
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Avoid Spaghetti Code">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#apprun-code" class="md-nav__link">
    <span class="md-ellipsis">
      AppRun Code
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#apprun-benefits" class="md-nav__link">
    <span class="md-ellipsis">
      AppRun Benefits
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#ceremony-vs-essence" class="md-nav__link">
    <span class="md-ellipsis">
      Ceremony vs. Essence
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Ceremony vs. Essence">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#the-essence" class="md-nav__link">
    <span class="md-ellipsis">
      The Essence
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#the-ceremony" class="md-nav__link">
    <span class="md-ellipsis">
      The Ceremony
    </span>
  </a>
  
    <nav class="md-nav" aria-label="The Ceremony">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#apprun" class="md-nav__link">
    <span class="md-ellipsis">
      AppRun
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#svelte" class="md-nav__link">
    <span class="md-ellipsis">
      Svelte
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#react-hooks" class="md-nav__link">
    <span class="md-ellipsis">
      React Hooks
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#vue-composition-api" class="md-nav__link">
    <span class="md-ellipsis">
      Vue Composition API
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#expression-comparison" class="md-nav__link">
    <span class="md-ellipsis">
      Expression Comparison
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          
            <div class="md-content" data-md-component="content">
              <article class="md-content__inner md-typeset">
                
                  

  
  


<h1 id="apprun-architecture">AppRun Architecture<a class="headerlink" href="#apprun-architecture" title="Permanent link">&para;</a></h1>
<p>AppRun is designed to simplify web application development by implementing the architecture, which ont only enhances code readability but also improves maintainability and scalability, making your development process more efficient.</p>
<h2 id="architecture-overview">Architecture Overview<a class="headerlink" href="#architecture-overview" title="Permanent link">&para;</a></h2>
<p>Application logic is broken down into three separate parts in the AppRun architecture.</p>
<ul>
<li>State (a.k.a. Model) — the state of your application</li>
<li>View — a function to display the state</li>
<li>Update — a collection of event handlers to update the state</li>
</ul>
<p>Use a <em>Counter</em> as an example.</p>
<p><div class="highlight"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">state</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span>

<span class="kd">const</span><span class="w"> </span><span class="nx">view</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">state</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
<span class="w">  </span><span class="o">&lt;</span><span class="nx">h1</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">state</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/h1&gt;</span>
<span class="w">  </span><span class="o">&lt;</span><span class="nx">button</span><span class="w"> </span><span class="nx">onclick</span><span class="o">=</span><span class="p">{()=&gt;</span><span class="nx">app</span><span class="p">.</span><span class="nx">run</span><span class="p">(</span><span class="s1">&#39;-1&#39;</span><span class="p">)}</span><span class="o">&gt;-</span><span class="mf">1</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">  </span><span class="o">&lt;</span><span class="nx">button</span><span class="w"> </span><span class="nx">onclick</span><span class="o">=</span><span class="p">{()=&gt;</span><span class="nx">app</span><span class="p">.</span><span class="nx">run</span><span class="p">(</span><span class="s1">&#39;+1&#39;</span><span class="p">)}</span><span class="o">&gt;+</span><span class="mf">1</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="o">&lt;</span><span class="err">/div&gt;;</span>

<span class="kd">const</span><span class="w"> </span><span class="nx">update</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="s1">&#39;+1&#39;</span><span class="o">:</span><span class="w"> </span><span class="nx">state</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">state</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span>
<span class="w">  </span><span class="s1">&#39;-1&#39;</span><span class="o">:</span><span class="w"> </span><span class="nx">state</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">state</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">1</span>
<span class="p">};</span>

<span class="nx">app</span><span class="p">.</span><span class="nx">start</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">,</span><span class="w"> </span><span class="nx">state</span><span class="p">,</span><span class="w"> </span><span class="nx">view</span><span class="p">,</span><span class="w"> </span><span class="nx">update</span><span class="p">);</span>
</code></pre></div>
<apprun-play hide-src></apprun-play></p>
<h3 id="state">State<a class="headerlink" href="#state" title="Permanent link">&para;</a></h3>
<p>The <em>state</em> can be any data structure, a number, an array, or an object that reflects the state of the application. In the _ Counter_ example, it is a number.</p>
<div class="highlight"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">state</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span>
</code></pre></div>
<div class="admonition note">
<p class="admonition-title">Note</p>
<p>You define the initial state. AppRun manages the state. Therefore the initial state is an immutable constant.</p>
</div>
<h3 id="view">View<a class="headerlink" href="#view" title="Permanent link">&para;</a></h3>
<p>The <em>view</em> generates Virtual DOM based on the state. Finally, AppRun calculates the differences against the web page element and renders the changes.</p>
<div class="highlight"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">view</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">state</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
<span class="w">  </span><span class="o">&lt;</span><span class="nx">h1</span><span class="o">&gt;</span><span class="nx">$</span><span class="p">{</span><span class="nx">state</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/h1&gt;</span>
<span class="w">  </span><span class="o">&lt;</span><span class="nx">button</span><span class="w"> </span><span class="nx">$onclick</span><span class="o">=</span><span class="s2">&quot;-1&quot;</span><span class="o">&gt;-</span><span class="mf">1</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">  </span><span class="o">&lt;</span><span class="nx">button</span><span class="w"> </span><span class="nx">$onclick</span><span class="o">=</span><span class="s2">&quot;+1&quot;</span><span class="o">&gt;+</span><span class="mf">1</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="o">&lt;</span><span class="err">/div&gt;;</span>
</code></pre></div>
<div class="admonition note">
<p class="admonition-title">Note</p>
<p>AppRun allows you to choose your favorite virtual DOM technology in the <em>view</em> function. The example above uses JSX. You can also use lit-html, uhtml, and etc.</p>
</div>
<h3 id="update">Update<a class="headerlink" href="#update" title="Permanent link">&para;</a></h3>
<p>The <em>update</em> is a collection of named event handlers or a dictionary of event handlers. Each event handler creates a new state from the current state.
<div class="highlight"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">update</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="s1">&#39;+1&#39;</span><span class="o">:</span><span class="w"> </span><span class="nx">state</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">state</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span>
<span class="w">  </span><span class="s1">&#39;-1&#39;</span><span class="o">:</span><span class="w"> </span><span class="nx">state</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">state</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">1</span>
<span class="p">}</span>
</code></pre></div></p>
<div class="admonition note">
<p class="admonition-title">Note</p>
<p>There are a few other ways to define event handlers.</p>
</div>
<p>When the three parts, the <em>state</em>, <em>view</em>, and <em>update</em> are provided to AppRun to start an application, AppRun registers the event handlers defined in the <em>update</em> and waits for AppRun events.</p>
<div class="highlight"><pre><span></span><code><span class="nx">app</span><span class="p">.</span><span class="nx">start</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">,</span><span class="w"> </span><span class="nx">state</span><span class="p">,</span><span class="w"> </span><span class="nx">view</span><span class="p">,</span><span class="w"> </span><span class="nx">update</span><span class="p">);</span>
</code></pre></div>
<p>Next, let's review some of the benefits of AppRun Architecture.</p>
<h2 id="avoid-spaghetti-code">Avoid Spaghetti Code<a class="headerlink" href="#avoid-spaghetti-code" title="Permanent link">&para;</a></h2>
<p>AppRun solves two challenging problems commonly found in application development:</p>
<p>Let's make the <em>Counter</em> a bitter complicated to show how many times each button clicked.</p>
<p><div class="highlight"><pre><span></span><code><span class="c1">// initial state object</span>
<span class="kd">const</span><span class="w"> </span><span class="nx">state</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">count</span><span class="o">:</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span>
<span class="w">  </span><span class="nx">count_plus</span><span class="o">:</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span>
<span class="w">  </span><span class="nx">count_minus</span><span class="o">:</span><span class="w"> </span><span class="mf">0</span>
<span class="p">}</span>

<span class="c1">// one view function to render the state, its&#39; a pure function</span>
<span class="kd">const</span><span class="w"> </span><span class="nx">view</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">({</span><span class="w"> </span><span class="nx">count</span><span class="p">,</span><span class="w"> </span><span class="nx">count_plus</span><span class="p">,</span><span class="w"> </span><span class="nx">count_minus</span><span class="w"> </span><span class="p">})</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">html</span><span class="sb">`</span>
<span class="sb">  &lt;h1&gt;</span><span class="si">${</span><span class="nx">count</span><span class="si">}</span><span class="sb">&lt;/h1&gt;</span>
<span class="sb">  &lt;button onclick=&quot;app.run(&#39;minus&#39;)&quot;&gt;- (</span><span class="si">${</span><span class="nx">count_minus</span><span class="si">}</span><span class="sb">)&lt;/button&gt;</span>
<span class="sb">  &lt;button onclick=&quot;app.run(&#39;plus&#39;)&quot;&gt;+ (</span><span class="si">${</span><span class="nx">count_plus</span><span class="si">}</span><span class="sb">)&lt;/button&gt;</span>
<span class="sb">`</span>

<span class="c1">// collection of state updates, state is immutable</span>
<span class="kd">const</span><span class="w"> </span><span class="nx">minus</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">state</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">({</span>
<span class="w">  </span><span class="p">...</span><span class="nx">state</span><span class="p">,</span>
<span class="w">  </span><span class="nx">count</span><span class="o">:</span><span class="w"> </span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span>
<span class="w">  </span><span class="nx">count_minus</span><span class="o">:</span><span class="w"> </span><span class="nx">state</span><span class="p">.</span><span class="nx">count_minus</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span>
<span class="p">});</span>

<span class="kd">const</span><span class="w"> </span><span class="nx">plus</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">state</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">({</span>
<span class="w">  </span><span class="p">...</span><span class="nx">state</span><span class="p">,</span>
<span class="w">  </span><span class="nx">count</span><span class="o">:</span><span class="w"> </span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span>
<span class="w">  </span><span class="nx">count_plus</span><span class="o">:</span><span class="w"> </span><span class="nx">state</span><span class="p">.</span><span class="nx">count_plus</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span>
<span class="p">});</span>

<span class="nx">app</span><span class="p">.</span><span class="nx">start</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">,</span><span class="w"> </span><span class="nx">state</span><span class="p">,</span><span class="w"> </span><span class="nx">view</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">plus</span><span class="p">,</span><span class="w"> </span><span class="nx">minus</span><span class="w"> </span><span class="p">});</span>
</code></pre></div>
<apprun-play hide-code="true" style="border: dotted gray 1px"></apprun-play></p>
<p>The code below uses jQuery. jQuery is a library that provides the convenience to access and manipulate the DOM. It does not give any architectural guidance. jQuery code is similar to the vanilla JavaScript code that can go wild.
A jQuery Example</p>
<div class="highlight"><pre><span></span><code><span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span>

<span class="w">    </span><span class="c1">// global state</span>
<span class="w">    </span><span class="kd">let</span><span class="w"> </span><span class="nx">count</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span>
<span class="w">    </span><span class="kd">let</span><span class="w"> </span><span class="nx">count_plus</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span>
<span class="w">    </span><span class="kd">let</span><span class="w"> </span><span class="nx">count_minus</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span>

<span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">plus</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="c1">// state update</span>
<span class="w">      </span><span class="nx">count</span><span class="w"> </span><span class="o">++</span>
<span class="w">      </span><span class="nx">count_plus</span><span class="w"> </span><span class="o">++</span>

<span class="w">      </span><span class="c1">// rendering</span>
<span class="w">      </span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#total&#39;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">count</span><span class="p">)</span>
<span class="w">      </span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#plus&#39;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="sb">`+ (</span><span class="si">${</span><span class="nx">count_plus</span><span class="si">}</span><span class="sb">)`</span><span class="p">)</span>
<span class="w">    </span><span class="p">}</span>

<span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">minus</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="c1">// state update</span>
<span class="w">      </span><span class="nx">count</span><span class="w"> </span><span class="o">--</span>
<span class="w">      </span><span class="nx">count_minus</span><span class="w"> </span><span class="o">++</span>

<span class="w">      </span><span class="c1">// rendering</span>
<span class="w">      </span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#total&#39;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">count</span><span class="p">)</span>
<span class="w">      </span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#minus&#39;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="sb">`- (</span><span class="si">${</span><span class="nx">count_minus</span><span class="si">}</span><span class="sb">)`</span><span class="p">)</span>
<span class="w">    </span><span class="p">}</span>

<span class="w">    </span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#plus&#39;</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">plus</span><span class="p">)</span>
<span class="w">    </span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#minus&#39;</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">minus</span><span class="p">)</span>

<span class="w">  </span><span class="p">})</span>
</code></pre></div>
<p>You can see from the above code that</p>
<ul>
<li>The state is shared globally. The two event handlers <em>plus</em> and <em>minus</em> both update the state directly.</li>
<li>The two event handlers also render the DOM in different pieces.</li>
</ul>
<p>Therefore, the jQuery code has two problems:</p>
<ul>
<li>Direct State Update</li>
<li>Rendering Fragments</li>
</ul>
<p>In much more complicated real applications, the logic could be long and tangled even more.</p>
<p>How can we solve the problems using AppRun?</p>
<h3 id="apprun-code">AppRun Code<a class="headerlink" href="#apprun-code" title="Permanent link">&para;</a></h3>
<p>AppRun includes <em>state</em> management, an event system, and Virtual-DOM rendering. Following the Hollywood Principle (Don't call us. We call you), we provide code pieces to AppRun and wait for AppRun to call them.</p>
<p>During an AppRun event lifecycle:</p>
<ul>
<li>AppRun let you update the <em>state</em> when needed</li>
<li>AppRun let you create a virtual DOM out of the <em>state</em> when needed</li>
<li>AppRun renders the virtual DOM when needed.</li>
</ul>
<p>When using AppRun to update the <em>state</em>, AppRun gives the <em>current state</em>. Then, we create a new <em>state</em> based on the <em>current state</em>.</p>
<div class="highlight"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">minus</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">state</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">({</span><span class="w"> </span><span class="p">...</span><span class="nx">state</span><span class="p">,</span>
<span class="w">  </span><span class="nx">count</span><span class="o">:</span><span class="w"> </span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span>
<span class="w">  </span><span class="nx">count_minus</span><span class="o">:</span><span class="w"> </span><span class="nx">state</span><span class="p">.</span><span class="nx">count_minus</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span>
<span class="p">});</span>

<span class="kd">const</span><span class="w"> </span><span class="nx">plus</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">state</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">({</span><span class="w"> </span><span class="p">...</span><span class="nx">state</span><span class="p">,</span>
<span class="w">  </span><span class="nx">count</span><span class="o">:</span><span class="w"> </span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span>
<span class="w">  </span><span class="nx">count_plus</span><span class="o">:</span><span class="w"> </span><span class="nx">state</span><span class="p">.</span><span class="nx">count_plus</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span>
<span class="p">});</span>
</code></pre></div>
<p>Because there is no reference to a shared global object, it is very easy to unit-test the logic. Also, we can focus on the parts of the <em>state</em> that are needed to update and ignore the rest of the <em>state</em> using the spread operator.</p>
<p>We only write a <em>view</em> function that creates a virtual DOM. AppRun renders the DOM using the diffing algorithm. It only updates the DOM that is needed to change. Therefore, although we have only one <em>view</em> function for all events, AppRun takes care of the differential rendering accordingly.</p>
<div class="highlight"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">view</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">({</span><span class="w"> </span><span class="nx">count</span><span class="p">,</span><span class="w"> </span><span class="nx">count_plus</span><span class="p">,</span><span class="w"> </span><span class="nx">count_minus</span><span class="w"> </span><span class="p">})</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">html</span><span class="sb">`</span>
<span class="sb">  &lt;h1&gt;</span><span class="si">${</span><span class="nx">count</span><span class="si">}</span><span class="sb">&lt;/h1&gt;</span>
<span class="sb">  &lt;button onclick=&quot;app.run(&#39;minus&#39;)&quot;&gt;- (</span><span class="si">${</span><span class="nx">count_minus</span><span class="si">}</span><span class="sb">)&lt;/button&gt;</span>
<span class="sb">  &lt;button onclick=&quot;app.run(&#39;plus&#39;)&quot;&gt;+ (</span><span class="si">${</span><span class="nx">count_plus</span><span class="si">}</span><span class="sb">)&lt;/button&gt;`</span>
</code></pre></div>
<p>The <em>view</em> function always returns the same result as long as the <em>state</em> is the same. It also does not change the <em>state</em> or anything outside the function, which means it has no side effects. Therefore, the <em>view</em> function is a <em>pure function</em>. There are many benefits of using the <em>pure__ function</em>, including but not limited to unit testing.</p>
<p>Finally, We have a _ counter _ application shown below by putting the <em>state, _view</em>, and <em>update</em> together.</p>
<p><div class="highlight"><pre><span></span><code><span class="c1">// initial state object</span>
<span class="kd">const</span><span class="w"> </span><span class="nx">state</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">count</span><span class="o">:</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span>
<span class="w">  </span><span class="nx">count_plus</span><span class="o">:</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span>
<span class="w">  </span><span class="nx">count_minus</span><span class="o">:</span><span class="w"> </span><span class="mf">0</span>
<span class="p">}</span>

<span class="c1">// one view function to render the state, its&#39; a pure function</span>
<span class="kd">const</span><span class="w"> </span><span class="nx">view</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">({</span><span class="w"> </span><span class="nx">count</span><span class="p">,</span><span class="w"> </span><span class="nx">count_plus</span><span class="p">,</span><span class="w"> </span><span class="nx">count_minus</span><span class="w"> </span><span class="p">})</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">html</span><span class="sb">`</span>
<span class="sb">  &lt;h1&gt;</span><span class="si">${</span><span class="nx">count</span><span class="si">}</span><span class="sb">&lt;/h1&gt;</span>
<span class="sb">  &lt;button onclick=&quot;app.run(&#39;minus&#39;)&quot;&gt;- (</span><span class="si">${</span><span class="nx">count_minus</span><span class="si">}</span><span class="sb">)&lt;/button&gt;</span>
<span class="sb">  &lt;button onclick=&quot;app.run(&#39;plus&#39;)&quot;&gt;+ (</span><span class="si">${</span><span class="nx">count_plus</span><span class="si">}</span><span class="sb">)&lt;/button&gt;</span>
<span class="sb">`</span>

<span class="c1">// collection of state updates, state is immutable</span>
<span class="kd">const</span><span class="w"> </span><span class="nx">minus</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">state</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">({</span>
<span class="w">  </span><span class="p">...</span><span class="nx">state</span><span class="p">,</span>
<span class="w">  </span><span class="nx">count</span><span class="o">:</span><span class="w"> </span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span>
<span class="w">  </span><span class="nx">count_minus</span><span class="o">:</span><span class="w"> </span><span class="nx">state</span><span class="p">.</span><span class="nx">count_minus</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span>
<span class="p">});</span>

<span class="kd">const</span><span class="w"> </span><span class="nx">plus</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">state</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">({</span>
<span class="w">  </span><span class="p">...</span><span class="nx">state</span><span class="p">,</span>
<span class="w">  </span><span class="nx">count</span><span class="o">:</span><span class="w"> </span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span>
<span class="w">  </span><span class="nx">count_plus</span><span class="o">:</span><span class="w"> </span><span class="nx">state</span><span class="p">.</span><span class="nx">count_plus</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span>
<span class="p">});</span>

<span class="nx">app</span><span class="p">.</span><span class="nx">start</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">,</span><span class="w"> </span><span class="nx">state</span><span class="p">,</span><span class="w"> </span><span class="nx">view</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">plus</span><span class="p">,</span><span class="w"> </span><span class="nx">minus</span><span class="w"> </span><span class="p">});</span>
</code></pre></div>
<apprun-play></apprun-play></p>
<p>You can see that with the help of AppRun state management and DOM differential rendering, we no longer have the <strong>Direct State Update</strong> with <strong>Rendering Fragments</strong> problems.</p>
<h3 id="apprun-benefits">AppRun Benefits<a class="headerlink" href="#apprun-benefits" title="Permanent link">&para;</a></h3>
<p>No matter how complex the application is, we will always have three parts, the <em>state</em>, <em>view</em>, and <em>update</em>. We don't mix the state update with DOM rendering. Because the three parts are decoupled, our codebase is so much easier to understand, test, and maintain.</p>
<h2 id="ceremony-vs-essence">Ceremony vs. Essence<a class="headerlink" href="#ceremony-vs-essence" title="Permanent link">&para;</a></h2>
<p>There was the 'Ceremony vs. Essence' discussion that happened about ten years ago. At that time, Ruby was on the rise. So people compared <a href="https://davesquared.net/2010/07/essence-and-ceremony-ruby-and-c.html">Ruby with C#</a>.</p>
<blockquote>
<p>The fundamental idea of the Ceremony vs. Essence idea appears to be that, all other things being equal, programming languages should attempt to allow programmers to clearly express the essence of their programs without being caught up in excessive ceremony provided by the programming language. -- From this <a href="http://bryanpendleton.blogspot.com/2010/02/ceremony-vs-essence.html">post</a>.</p>
</blockquote>
<p>Let's take a look at some of today's frontend technologies from the Ceremony vs. Essence point of view. We will use a simple button-click counting application as an example.</p>
<p><div class="highlight"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">add</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">count</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">count</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="p">;</span>

<span class="kd">const</span><span class="w"> </span><span class="nx">view</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">count</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">button</span><span class="w"> </span><span class="nx">$onclick</span><span class="o">=</span><span class="p">{</span><span class="nx">add</span><span class="p">}</span><span class="o">&gt;</span>
<span class="w">  </span><span class="nx">Clicks</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="nx">count</span><span class="p">}</span>
<span class="o">&lt;</span><span class="err">/button&gt;;</span>

<span class="kd">const</span><span class="w"> </span><span class="nx">rendered</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">count</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">count</span><span class="p">);</span>

<span class="nx">app</span><span class="p">.</span><span class="nx">start</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nx">view</span><span class="p">,</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">rendered</span><span class="w"> </span><span class="p">});</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;mounted!&#39;</span><span class="p">);</span>
</code></pre></div>
<apprun-play hide_src="true" hide_button="true"></apprun-play></p>
<h3 id="the-essence">The Essence<a class="headerlink" href="#the-essence" title="Permanent link">&para;</a></h3>
<p>The essence of the application is to display a button that adds the count by one and shows the count. Also, it will log some messages in the console to mimic effects after the rendering cycle.</p>
<p>The concept is as simple as below.</p>
<div class="highlight"><pre><span></span><code><span class="o">&lt;</span><span class="nx">button</span><span class="w"> </span><span class="nx">onclick</span><span class="o">=</span><span class="s2">&quot;count+1&quot;</span><span class="o">&gt;</span>
<span class="w">  </span><span class="nx">Clicks</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="nx">count</span><span class="p">}</span>
<span class="o">&lt;</span><span class="err">/button&gt;</span>

<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">count</span><span class="p">);</span><span class="w"> </span><span class="c1">// upon very click</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;mounted!&#39;</span><span class="p">);</span><span class="w"> </span><span class="c1">// upon mounted</span>
</code></pre></div>
<p>We will compare the 95-character essence code above with a few front-end frameworks, such as AppRun, Svelte, React Hooks, and the Vue Composition API.</p>
<blockquote>
<p>A framework defines a skeleton where the application defines its features to fill out the skeleton. -- you can find this quote from googling.</p>
</blockquote>
<p>We need to write code to plugin the essence code into the frontend frameworks, which is the ceremony. We don't want them. Less of them is better.</p>
<h3 id="the-ceremony">The Ceremony<a class="headerlink" href="#the-ceremony" title="Permanent link">&para;</a></h3>
<h4 id="apprun">AppRun<a class="headerlink" href="#apprun" title="Permanent link">&para;</a></h4>
<p>Application logic is broken down into three separate parts in the AppRun architecture.</p>
<p><div class="highlight"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">add</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">count</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">count</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="p">;</span>

<span class="kd">const</span><span class="w"> </span><span class="nx">view</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">count</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">button</span><span class="w"> </span><span class="nx">$onclick</span><span class="o">=</span><span class="p">{</span><span class="nx">add</span><span class="p">}</span><span class="o">&gt;</span>
<span class="w">  </span><span class="nx">Clicks</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="nx">count</span><span class="p">}</span>
<span class="o">&lt;</span><span class="err">/button&gt;;</span>

<span class="kd">const</span><span class="w"> </span><span class="nx">rendered</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">count</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">count</span><span class="p">);</span>

<span class="nx">app</span><span class="p">.</span><span class="nx">start</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nx">view</span><span class="p">,</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">rendered</span><span class="w"> </span><span class="p">});</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;mounted!&#39;</span><span class="p">);</span>
</code></pre></div>
<apprun-play></apprun-play></p>
<p>In the example above,</p>
<ol>
<li>The application's state is a number that has a default value of 0.</li>
<li>The <em>add</em> function is the event handler to update the state.</li>
<li>The <em>view</em> function displays the state.</li>
<li>The <em>rendered</em> function runs after the DOM is rendered.</li>
<li>The <em>app.start</em> function ties them all together to the <em>document.body</em> element.</li>
</ol>
<p>Now, we identify and cross out the ceremonies.</p>
<p><img alt="AppRun" src="https://dev-to-uploads.s3.amazonaws.com/i/7eypk2z64h5azepxnlbc.png" /></p>
<p>With AppRun, the ceremony is mainly required by the JavaScript syntax, like the module import and the arrow functions. Overall, it has 226 characters, which means 58% of the code are ceremonies.</p>
<h4 id="svelte">Svelte<a class="headerlink" href="#svelte" title="Permanent link">&para;</a></h4>
<p>Svelte uses a single file for a component. The file consists of a script section for the code and the UI template. It requires a compiler to turn it into runnable JavaScript code.</p>
<div class="highlight"><pre><span></span><code><span class="o">&lt;</span><span class="nx">script</span><span class="o">&gt;</span>
<span class="w">  </span><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">onMount</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;svelte&#39;</span>

<span class="w">  </span><span class="kd">let</span><span class="w"> </span><span class="nx">count</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span>
<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">add</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">count</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="p">;</span>

<span class="w">  </span><span class="nx">$</span><span class="o">:</span><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">count</span><span class="p">)</span>

<span class="w">  </span><span class="nx">onMount</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;mounted!&#39;</span><span class="p">)</span>
<span class="o">&lt;</span><span class="err">/script&gt;</span>

<span class="o">&lt;</span><span class="nx">button</span><span class="w"> </span><span class="nx">on</span><span class="o">:</span><span class="nx">click</span><span class="o">=</span><span class="p">{</span><span class="nx">add</span><span class="p">}</span><span class="o">&gt;</span>
<span class="w">  </span><span class="nx">Clicks</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="nx">count</span><span class="p">}</span>
<span class="o">&lt;</span><span class="err">/button&gt;</span>
</code></pre></div>
<p>Behind the scene, the svelte compiler creates the component class boilerplate. Then, the compiler extracts the <em>script</em> block, wires up the <a href="https://svelte.dev/tutorial/reactive-assignments">reactivity</a> ($:), and adds the rendering template into the boilerplate. The boilerplate does not exist in our codebase. Therefore, the svelte application has very few ceremonies.</p>
<p><img alt="Svelte" src="https://dev-to-uploads.s3.amazonaws.com/i/o5j864n6r89tvqzqbcev.png" /></p>
<p>Svelte code ceremony is also mainly the JavaScript syntax requirements. Only the <em>script</em> tags are required by the Svelte compiler, which is worth trading with what the compiler saves.</p>
<p>It has 217 characters, which means 56% of the code is ceremony.</p>
<h4 id="react-hooks">React Hooks<a class="headerlink" href="#react-hooks" title="Permanent link">&para;</a></h4>
<p>The React code is a slightly modified version of the <a href="https://reactjs.org/docs/hooks-overview.html">React</a> Hooks Docs](<a href="https://reactjs.org/docs/hooks-overview.html">https://reactjs.org/docs/hooks-overview.html</a>).</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">useState</span><span class="p">,</span><span class="w"> </span><span class="nx">useEffect</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;react&#39;</span><span class="p">;</span>

<span class="kd">function</span><span class="w"> </span><span class="nx">Example</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">count</span><span class="p">,</span><span class="w"> </span><span class="nx">setCount</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">(</span><span class="mf">0</span><span class="p">);</span>

<span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">add</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">setCount</span><span class="p">(</span><span class="nx">count</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="p">)</span>

<span class="w">  </span><span class="nx">useEffect</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">count</span><span class="p">);</span>
<span class="w">  </span><span class="p">});</span>

<span class="w">  </span><span class="k">return</span><span class="w"> </span><span class="p">(</span>
<span class="w">    </span><span class="o">&lt;</span><span class="nx">button</span><span class="w"> </span><span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="nx">add</span><span class="p">}</span><span class="o">&gt;</span>
<span class="w">      </span><span class="nx">Clicks</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="nx">count</span><span class="p">}</span>
<span class="w">    </span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="w">  </span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div>
<p>The React code has more ceremonies than the AppRun code and Svelte code above. It has 272 characters and a 65% ceremony.</p>
<p><img alt="React" src="https://dev-to-uploads.s3.amazonaws.com/i/qtmjinxl7zqpoyz0og41.png" /></p>
<p>The <em>setCount, _useState</em>, and <em>useEffect</em> functions are the code that deals with the React framework itself. They don't help us to express the essence of the application. They are framework ceremonies.</p>
<h4 id="vue-composition-api">Vue Composition API<a class="headerlink" href="#vue-composition-api" title="Permanent link">&para;</a></h4>
<p>The Vue code is a slightly modified version of the <a href="https://vue-composition-api-rfc.netlify.com/#type-issues-with-class-api">Vue Composition API Docs</a>.</p>
<p><div class="highlight"><pre><span></span><code><span class="o">&lt;</span><span class="nx">template</span><span class="o">&gt;</span>
<span class="w">  </span><span class="o">&lt;</span><span class="nx">button</span><span class="w"> </span><span class="err">@</span><span class="nx">click</span><span class="o">=</span><span class="s2">&quot;add&quot;</span><span class="o">&gt;</span>
<span class="w">    </span><span class="nx">Clicks</span><span class="o">:</span><span class="w"> </span><span class="p">{{</span><span class="w"> </span><span class="nx">count</span><span class="w"> </span><span class="p">}}</span>
<span class="w">  </span><span class="o">&lt;</span><span class="err">/button&gt;</span>
<span class="o">&lt;</span><span class="err">/template&gt;</span>

<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ref</span><span class="p">,</span><span class="w"> </span><span class="nx">watchEffect</span><span class="p">,</span><span class="w"> </span><span class="nx">onMounted</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;vue&#39;</span>

<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">setup</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="nx">count</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">ref</span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
<span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">add</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nx">count</span><span class="p">.</span><span class="nx">value</span><span class="o">++</span>
<span class="w">    </span><span class="p">}</span>

<span class="w">    </span><span class="nx">watchEffect</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">count</span><span class="p">.</span><span class="nx">value</span><span class="p">))</span>

<span class="w">    </span><span class="nx">onMounted</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;mounted!&#39;</span><span class="p">))</span>

<span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nx">count</span><span class="p">,</span>
<span class="w">      </span><span class="nx">add</span>
<span class="w">    </span><span class="p">}</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
The Vue code has 355 characters and a 73% ceremony.</p>
<p><img alt="Vue" src="https://dev-to-uploads.s3.amazonaws.com/i/v44mpss7ysv5wwx4p45j.png" /></p>
<p>The <em>ref</em>, <em>watchEffect</em>, <em>onMounted</em>, <em>setup, _count.value</em>, and returning an object of <em>count</em>, and <em>add</em> are all required by the Vue framework. Sometimes, they may make writing code more difficult.</p>
<h3 id="expression-comparison">Expression Comparison<a class="headerlink" href="#expression-comparison" title="Permanent link">&para;</a></h3>
<p>We are not stopping at only comparing the character counts or how many extra boilerplates are forced on you by the frameworks. We also compare how you express the business logic. For example, let's see how we express <em><strong>Increase the Counter</strong></em> as an example again.</p>
<div class="highlight"><pre><span></span><code><span class="c1">// AppRun</span>
<span class="kd">const</span><span class="w"> </span><span class="nx">add</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">counter</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">counter</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="p">;</span>

<span class="c1">//Svelte</span>
<span class="kd">let</span><span class="w"> </span><span class="nx">count</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span>
<span class="kd">const</span><span class="w"> </span><span class="nx">add</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">counter</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="p">;</span>

<span class="c1">// React</span>
<span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">count</span><span class="p">,</span><span class="w"> </span><span class="nx">setCount</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">(</span><span class="mf">0</span><span class="p">);</span>
<span class="kd">const</span><span class="w"> </span><span class="nx">add</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">setCount</span><span class="p">(</span><span class="nx">count</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="p">);</span>

<span class="c1">// Vue</span>
<span class="kd">const</span><span class="w"> </span><span class="nx">count</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">ref</span><span class="p">(</span><span class="mf">0</span><span class="p">);</span>
<span class="kd">const</span><span class="w"> </span><span class="nx">add</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">count</span><span class="p">.</span><span class="nx">value</span><span class="o">++</span><span class="p">;</span>
</code></pre></div>
<p>Both the AppRun code and the Svelte code express the essence well and have less ceremony. So AppRun and Svelte are easy to understand. React Hooks and Vue Composition API are cool. However, they both add a lot more ceremonies to our codebase.</p>
<p>Remember, the ceremony has no business values but just challenges to understand and maintain.</p>
<p>In addition, AppRun has a few other benefits</p>
<ul>
<li>AppRun is lightweight that can run in browsers directly without a compiler.</li>
<li>AppRun uses <em>pure functions</em> when it is possible.</li>
<li>AppRun app codebase can easily be <a href="../strong-typing/">strongly typed</a> if you wish.</li>
</ul>
<p>I hope you enjoy it. If you haven't tried, try to edit and run the AppRun code above.</p>









  




                
              </article>
            </div>
          
          
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
        </div>
        
      </main>
      
        <footer class="md-footer">
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-copyright">
  
    <div class="md-copyright__highlight">
      Copyright &copy; 2015 - 2025 Yiyi Sun
    </div>
  
  
    Made with
    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
      Material for MkDocs
    </a>
  
</div>
      
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    
    
    <script id="__config" type="application/json">{"base": "..", "features": ["navigation.sections"], "search": "../assets/javascripts/workers/search.b8dbb3d2.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
    
    
      <script src="../assets/javascripts/bundle.fe8b6f2b.min.js"></script>
      
        <script src="../assets/vendor/codemirror/codemirror.js"></script>
      
        <script src="../assets/vendor/codemirror/mode/javascript/javascript.js"></script>
      
        <script src="../assets/vendor/codemirror/mode/xml/xml.js"></script>
      
        <script src="../assets/vendor/codemirror/mode/jsx/jsx.js"></script>
      
        <script src="../assets/apprun-play.js"></script>
      
        <script src="../assets/apprun-code.js"></script>
      
    
  </body>
</html>